<template>
<div>

      <el-form :inline="true" style="width: 50%;float:left" class="demo-form-inline">
        
         <!-- 时间框 -->
    <el-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>


      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- //总工资 -->
      <template>
      <el-table
        :data="tableData"
        style="width: 45%;float:right">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand"  style="width: 78%;float:left">
              <!-- <el-form-item label="定金余额">
                <span>{{ props.row.sumosal }}</span>
              </el-form-item> -->
              <el-form-item label="销售余额">
                <span>{{ props.row.sumbuy }}</span>
              </el-form-item>
              <el-form-item label="已发工资">
                <span>{{ props.row.sums }}</span>
              </el-form-item>
            </el-form>

            <!-- <el-form label-position="left" inline   style="width: 20%;float:left">
              <el-form-item >
                 <el-button type="success" plain @click="changeok">
                    <span v-if="open">关闭</span>
                    <span v-else>更多...</span>
                   </el-button>
              </el-form-item>
            </el-form> -->
          </template>
        </el-table-column>

        <el-table-column
          label="银行账号"
          prop="account">
        </el-table-column>
        <el-table-column
          label="账号余额"
          prop="money">
        </el-table-column>
         <el-table-column
          label="目标收入"
         >
         <el-button @click="handleEdit()"  type="primary" icon="el-icon-edit" circle></el-button>
        </el-table-column>
      </el-table>
    </template>


<!-- 表 -->
 <el-table
    :data="tableData2"
    stripe
    style="width: 100%">
    <el-table-column
     
      label="日期"
      width="210">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.date|datechange }}</span>
      </template>
    </el-table-column>

    <el-table-column
    label="定金收入"
      width="210">
       <template slot-scope="scope">
        <span style="margin-left: 10px" v-if="scope.row.order != null">{{ scope.row.order}}</span>
        <span style="margin-left: 10px" v-if="scope.row.order == null">0</span>
      </template>
    </el-table-column>

    <el-table-column
      label="尾款收入"
      width="210">
       <template slot-scope="scope">
        <span style="margin-left: 10px" v-if="scope.row.sale != null">{{ scope.row.sale}}</span>
        <span style="margin-left: 10px" v-if="scope.row.sale == null">0</span>
      </template>
    </el-table-column>

    <!-- <el-table-column
      label="工资支出"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px" v-if="scope.row.state != null">{{ scope.row.state}}</span>
        <span style="margin-left: 10px" v-if="scope.row.state == null">0</span>
      </template>
    </el-table-column> -->

  <el-table-column
      label="总收入"
      width="250">
     <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.order*1+scope.row.sale*1 - scope.row.state*1 }}</span>
      </template>
    </el-table-column>


 <el-table-column
      label="展示"
      width="180">
     <template slot-scope="scope">
        <span style="margin-left: 10px">
            <el-progress  :percentage="100" status="success" v-if="scope.row.order*1+scope.row.sale*1 - scope.row.state*1 >= glosal"></el-progress>
            <el-progress  :percentage="(scope.row.order*1+scope.row.sale*1 - scope.row.state*1)/glosal*100" status="warning" v-else-if="scope.row.order*1+scope.row.sale*1 - scope.row.state*1 >0"></el-progress>
            <el-progress  :percentage="(scope.row.state*1 -scope.row.order*1+scope.row.sale*1 + 100 )/glosal*100" status="exception" v-else></el-progress>
        </span>
      </template>
    </el-table-column>
 </el-table>

 <!-- //弹出框 -->
    <el-dialog title="目标收入" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth">
          <el-input v-model="glosal" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEditok">确 定</el-button>
      </div>
    </el-dialog>
  <!-- 分页 -->
        <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 15]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="sumc">
        </el-pagination>
      </div>

  </div>
</template>

<style>

  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

</style>


<script>

  export default {
     filters:{
          "datechange":function(value){
              var date = new Date(value)
              var y = date.getFullYear()
              var m = date.getMonth() + 1
              m = m < 10 ? ('0' + m) : m
              var d = date.getDate()
              d = d < 10 ? ('0' + d) : d
              return  y + '-' + m + '-' + d
          }
      },

    created() {
      //公司总账
        this.sum();
      //流水展示
        this.list();
    },
    data() {
      return {

          //弹出框数据
          dialogTableVisible: false,
          dialogFormVisible: false,
          //公司总账
          tableData: [{
          ano: '',
          account: '********',
          money: '********',
          sumosal: '',
          sumbuy:'',
          sums:'',
        }],
        //隐藏框展示数据
        open:false,
         //分页数据
        current:1,
        size:5,
        sumc:'', //记录总条数
        //目标额
        glosal:'',
        ano:'',
       //日期
         pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        //日期数据
        value2: '',
        starttime:'',
        endtime:'',
        starttime2:'',
        endtime2:'',
        //每日流水记录
        tableData2:"",
      }
    },
    methods: {
      //修改日目标薪资
       glosalary(){
         let self = this
          this.$axios.get("/ever-apitalflow/glosal"
          )
          .then(res => {
              self.glosal = res.data.glosal
          })
       },

      //更多薪资说明
      changeok(){
        if(this.open == false){this.open = true;}
        else{this.open = false}
      },
      //弹出框
       handleEdit() {
        this.dialogFormVisible = true
      },
      //确认弹出框书库
       handleEditok() {
       this.dialogFormVisible = false;
       const sal = this.glosal
        const ano = this.ano
         let self = this
          this.$axios.get("/ever-apitalflow/glosal?glosal="+sal+"&ano="+ano
          )
          .then(res => {
              // self.list()
          })
       
      },
      //工资展示
      sum(){
        let self = this
          this.$axios.get("/ever-apitalflow/find"
          )
          .then(res => {
              self.tableData[0] = res.data
              self.glosal = self.tableData[0].glosal
              self.ano = self.tableData[0].ano
          })
      },
       //分页
           //每页几条
      handleSizeChange(val) {
        this.size = val
        this.onSubmit()
      },
           //第几页
      handleCurrentChange(val) {
        this.current = val;
        this.onSubmit()
      },
      //列表展示
     list(){
        //获取出来的标准时间  (开始时间)
          const month = this.starttime;
          if(month == ""){ 
            const strMonth = "1900/01/00"
            this.starttime2 = strMonth
            }
          else{
              var date = new Date(this.starttime)
              var y = date.getFullYear()
              var m = date.getMonth() + 1
              m = m < 10 ? ('0' + m) : m
              var d = date.getDate()
              d = d < 10 ? ('0' + d) : d
              this.starttime2 = y + '/' + m + '/' + d
        }
          // （结束时间）
          const month2 = this.endtime;
          if(month2 == ""){
            this.endtime2 = "2200/01/01"
          }else{
             var date = new Date(this.endtime)
              var y = date.getFullYear()
              var m = date.getMonth() + 1
              m = m < 10 ? ('0' + m) : m
              var d = date.getDate()
              d = d < 10 ? ('0' + d) : d
              this.endtime2 = y + '/' + m + '/' + d
        }
          let self = this
          this.$axios.get("/ever-apitalflow/findEvery?day="+1+"&starttime="+this.starttime2+"&endtime="+this.endtime2+"&current="+this.current+"&size="+this.size
          )
          .then(res => {
              self.tableData2 = res.data
              if( res.data.length == 0){ self.sumc =0}
              self.sumc = (res.data)[0].sum
          })
    },
     //搜索方法
     onSubmit() {
       if(this.value2 == ""){}
       else{
         //对value2进行处理
          this.starttime = this.value2[0]
          this.endtime = this.value2[1]
       }
        this.list();
      },
    }
  }
</script>